import React, { Component } from 'react'
import '../App.css'
import axios from 'axios'

export default class Address extends Component {
    state = {
        objectValue: {
            name: "",
            phone: "",
            city: "",
            detailcity: "",
        },
        list: []
    }
    goback() {
        this.props.history.go(-1)
    }
    save(objectValue) {
        axios({
            url: "/address",
            method: 'post',
            data: {
                name: objectValue.name,
                phone: objectValue.phone,
                city: objectValue.city,
                detailcity: objectValue.detailcity
            }
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }

    matter(value, key) {
        let { objectValue } = this.state
        objectValue[key] = value
        this.setState({
            objectValue
        })
    }
    render() {
        const { objectValue } = this.state
        return (
            <div className='address'>
                <div className='address_header'>
                    <li><svg t="1635235162016" onClick={() => this.goback()} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3104" width="200" height="200"><path d="M478.104276 337.595469V184.66079L114.48369 442.197642l363.620586 257.597261V548.220967c145.529941 0.060409 280.456525 7.405763 394.534756 210.864063 0.001024-129.244021-21.321388-417.874222-394.534756-421.489561z" fill="#98C4D8" p-id="3105"></path><path d="M447.778841 307.270034V154.334331L84.158254 411.871182 447.778841 669.468444V517.894508c145.529941 0.060409 280.456525 7.405763 394.534756 210.864063 0-129.244021-21.322412-417.874222-394.534756-421.488537z" fill="#EFD9A0" p-id="3106"></path><path d="M283.00269 350.410162a27.283472 57.977507 55.515 1 0 95.578754-65.652623 27.283472 57.977507 55.515 1 0-95.578754 65.652623Z" fill="#FEFEFE" p-id="3107"></path><path d="M224.416795 445.822358a18.189323 31.830547 55.515 1 0 52.474213-36.044304 18.189323 31.830547 55.515 1 0-52.474213 36.044304Z" fill="#FEFEFE" p-id="3108"></path></svg></li>
                    <li>添加地址</li>
                    <li></li>
                </div>
                <div className='address_main'>
                    <div className='address_main_one'>
                        <li>&emsp;姓名&emsp;&emsp;&emsp;<input placeholder='收货人姓名' value={objectValue.name} onChange={(e) => this.matter(e.target.value, "name")}></input></li>
                        <li>&emsp;电话&emsp;&emsp;&emsp;<input placeholder='收货人电话' value={objectValue.phone} onChange={(e) => this.matter(e.target.value, "phone")}></input></li>
                        <li>&emsp;地区&emsp;&emsp;&emsp;<input placeholder='省/市/区' value={objectValue.city} onChange={(e) => this.matter(e.target.value, "city")}></input></li>
                        <li>&emsp;详细地址&emsp;<input placeholder='详细地址' value={objectValue.detailcity} onChange={(e) => this.matter(e.target.value, "detailcity")}></input></li>
                        <p onClick={() => this.save(objectValue)}>保存</p>
                    </div>
                </div>
            </div>
        )
    }
}
